<template>
	<view class="container">
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">风险分级管控</view>
			<view class="right" @click="toggleSearch">
				<view v-if="isShowSearch">
					<uni-icons type="arrowup" size="20" color="#999"></uni-icons>
					<text>收起</text>
				</view>
				<view v-else>
					<uni-icons type="arrowdown" size="20" color="#999"></uni-icons>
					<text>展开</text>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="search" v-if="isShowSearch">
				<view class="item flex-row">
					<picker @change="changeConpany" :value="search.company" :range="companies" range-key="name">
						<view v-if="companies.length" class="uni-input">{{ companies[search.company].name }}</view>
					</picker>
					<uni-icons type="arrowdown" size="20" color="#666"></uni-icons>
				</view>
				<view class="item flex-row">
					<view class="label">时间：</view>
					<picker @change="changeDate" @columnchange="toggleDate" :value="[current.year, current.month]" :range="date" mode="multiSelector">
						<view class="uni-input">{{ date[0][current.year] }}-{{ date[1][current.month] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="20" color="#666"></uni-icons>
				</view>
				<view class="item flex-row">
					<input type="text" v-model="search.name" placeholder="风险点名称" />
					<button type="primary" @click="searchList">查询</button>
				</view>
			</view>
			<scroll-view v-if="list.length" @scrolltolower="getNextPageList" scroll-y="true" class="scroll" :class="{full: !isShowSearch}">
				<view @click="toDetail(item)" class="card" v-for="(item, index) in list" :key="index">
					<view class="title flex-row">
						<view class="name">{{ item.name }}</view>
						<view>负责人：{{ item.username || '无' }}</view>
						<button @click.stop.prevent="urge(item.id)" type="warn" size="mini">催办</button>
					</view>
					<view class="item">
						<view class="flex-row">
							<view class="flex-row row">
								<view class="label">任务数：<text>{{ item.allmis }}</text></view>
								<view class="value">{{ search.month }}月</view>
							</view>
							<view class="flex-row row">
								<view class="label">报隐患：<text>{{ item.allssp }}</text></view>
								<view class="value">{{ search.month }}月</view>
							</view>
						</view>
						<view class="flex-row success">
							<view class="flex-row row">
								<view class="label">已巡检：<text>{{ item.donemis }}</text></view>
								<view class="value">{{ item.donemis_rate }}%</view>
							</view>
							<view class="flex-row row">
								<view class="label">已整改：<text>{{ item.donessp }}</text></view>
								<view class="value">{{ item.donessp_rate }}%</view>
							</view>
						</view>
						<view class="flex-row error">
							<view class="flex-row row">
								<view class="label">已逾期：<text>{{ item.out_limit }}</text></view>
								<view class="value">{{ item.out_limit_rate }}%</view>
							</view>
							<view class="flex-row row">
								<view class="label">未整改：<text>{{ item.undone }}</text></view>
								<view class="value">{{ item.undone_rate }}%</view>
							</view>
						</view>
					</view>
				</view>
				<view class="nodata">没有更多了~</view>
			</scroll-view>
			<view v-else class="nodata">没有更多了~</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import { getRandArray, date } from '../../common/function.js';
const YEAR_LENGTH = 4;	// 连续显示的年份数量,5年
export default{
	components: { uniIcons },
	data(){
		return {
			isShowSearch: true,
			companies: [],
			date: [],
			current: {
				year: YEAR_LENGTH,
				month: 0
			},
			search: {
				company: 0,
				year: '',
				month: '',
				name: '',
				page: 1
			},
			list: [],
			total: 1
		}
	},
	onShow(){
		this.doCompanyList();
		this.getCurrentDate();
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		// 进去巡查列表
		toDetail(row){
			uni.navigateTo({
				url: `patrolList?id=${row.id}&name=${row.name}&date=${this.search.year +'-'+ this.search.month}`
			})
		},
		// 切换搜索条件
		toggleSearch(){
			this.isShowSearch = !this.isShowSearch;
		},
		// 选择公司
		changeConpany(e){
			this.search.company = e.detail.value;
			this.getList();
		},
		// 选择日期
		changeDate(e){
			this.current.year = e.detail.value[0];
			this.current.month = e.detail.value[1];
			this.search.year = this.date[0][this.current.year];
			this.search.month = this.date[1][this.current.month];
			this.getList();
		},
		// 切换日期
		toggleDate(e){
			if(e.detail.column == 1) return;
			let month = e.detail.value == YEAR_LENGTH ? date(false).month : 12;
			this.date = this.date.splice(0, 1);
			this.date.push(getRandArray(1, month, 2));
		},
		// 处理公司列表
		doCompanyList(){
			let _this = this;
			let companyId = uni.getStorageSync('company');
			uni.request({
				url: _this.$API.getCompanyName,
				data: { company: companyId },
				header: _this.$API.get_head(),
				success: (res)=>{
					_this.companies = [{id: companyId, name: res.data.data.companyName}];
					_this.getList();
				}
			})
		},
		// 催办
		urge(id){
			uni.showModal({
				title: '提示',
				content: '是否催办？',
				success: (res)=>{
					if(res.confirm){
						uni.request({
							url: this.$API.dangerUrge,
							data: {position_id: id,
							userid:uni.getStorageSync('userid')},
							header: this.$API.get_head(),
							success: (res)=>{
								uni.showToast({
									icon: 'none',
									title: res.data.message
								})
							}
						})
					}
				}
			})
		},
		// 获取当前实时日期
		getCurrentDate(){
			let oDate = date(false);
			let year = oDate.year;
			let month = oDate.month;
			
			// 生成日期
			this.date = [];
			this.date.push(getRandArray(year-YEAR_LENGTH, year));
			this.date.push(getRandArray(1, month, 2));
			this.current.year = YEAR_LENGTH;
			this.current.month = month - 1;
			this.search.year = year;
			this.search.month = month < 10 ? '0'+month : month;
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.showLoading({
				title: '加载中'
			});
			uni.request({
				url: _this.$API.riskLevel,
				data: {
					company: _this.companies[_this.search.company].id,
					month: _this.search.year + '' + _this.search.month,
					userid: uni.getStorageSync('userid'),
					name: _this.search.name
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					_this.total = res.data.total;
					
					// 判断是否为第一页数据
					if(_this.search.page == 1){
						_this.list = res.data.rows;
					}else{
						_this.list = _this.list.concat(res.data.rows);
					}
					
					// 计算百分比
					_this.list = _this.list.map(item=>{
						// console.log(item)
						// 判断总任务数是否为0，如果为0则其他值全部为0
						if(item.allmis){
							// 需要判断各个指标是否超过任务数：如果超过，取值为任务数
							// 计算已巡检百分比：需要判断已巡检是否为0
							item.donemis = item.donemis > item.allmis ? item.allmis : item.donemis
							item.donemis_rate = item.donemis ? Number.parseInt((item.donemis * 100 / item.allmis)) : 0
							
							// 计算已整改百分比：需要哦按段已整改数是否为0
							item.donessp = item.donessp > item.allmis ? item.allmis : item.donessp
							item.donessp_rate = item.donessp ? Number.parseInt((item.donessp* 100 / item.allmis) ) : 0
							
							// 计算已逾期百分比：需要哦按段已逾期数是否为0
							item.out_limit = item.out_limit > item.allmis ? item.allmis : item.out_limit
							item.out_limit_rate = item.out_limit ? Number.parseInt((item.out_limit* 100 / item.allmis) ) : 0
							
							// 计算未整改百分比：需要判断未整改数是否为0
							item.undone = item.allssp - item.donemis
							item.undone = item.undone > item.allmis ? item.allmis : item.undone
							item.undone_rate = item.undone ? Number.parseInt((item.undone* 100 / item.allmis) ) : 0
						}else{
							item.allmis = 0
							item.allssp = 0
							item.donemis = 0
							item.donemis_rate = 0
							item.donessp = 0
							item.donessp_rate = 0
							item.out_limit = 0
							item.out_limit_rate = 0
							item.undone = 0
							item.undone_rate = 0
						}
						
						return item
					})
				},
				fail: ()=>{
					uni.showToast({
						icon: 'none',
						title: '加载失败'
					})
					uni.hideLoading();
				}
			})
		},
		// 获取下一页数
		getNextPageList(){
			this.search.page++;
			if(this.search.page < this.total){
				this.getList();
			}
		},
		// 查询数据
		searchList(){
			this.page = 1;
			this.total = 0;
			this.list = [];
			this.getList();
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
}
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}
.body{
	height: calc(100vh - var(--status-bar-height) - 88upx);
	background: #F0F0F0;
	padding: 20upx 20upx 0;
	box-sizing: border-box;
}

.scroll{
	height: calc(100% - 290upx);
}
.scroll.full{
	height: 100%;
}
.card{
	height: 174upx;
	background: #fff;
	margin-bottom: 16upx;
	border-radius: 16upx;
	padding: 14upx 20upx 20upx;
	box-shadow: 0 2upx 4upx #DEDEDE;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	font-size: 28upx;
	width: calc((100% - 100upx) / 2);
}
.card .title view.name{
	text-indent: 16upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #179DFE;
	border-radius: 6upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .title button{
	padding: 0;
	width: 84upx;
	height: 44upx;
	font-size: 24upx;
	line-height: 44upx;
	border-radius: 6upx;
	background-color: #F98202;
}
.card .item .label{
	width: 176upx;
}
.card .item .flex-row.success text,
.card .item .flex-row.success .value{
	color: #38B2E2;
}
.card .item .flex-row.error text,
.card .item .flex-row.error .value{
	color: red;
}
.card .item .flex-row.row{
	justify-content: flex-start;
}
.card .item .flex-row.row view,
.card .item .flex-row.row text{
	font-size: 24upx;
}
.card .item .flex-row.row:first-child{
	width: 60%;
}
.card .item .flex-row.row:last-child{
	width: 40%;
}

.search .item{
	height: 80upx;
	line-height: 80upx;
	background: #fff;
	border-radius: 10upx;
	margin-bottom: 16upx;
	padding: 0 12upx;
}
.search .item .label{
	width: 120upx;
	color: #797979;
	text-indent: 10upx;
}
.search .item picker{
	width: 85%;
}
.search .item input{
	color: #A3A3A3;
	font-size: 28upx;
	text-align: center;
	background: #F0F0F0;
	border-radius: 10upx;
	border: 2upx solid #509EC5;
	width: calc(100% - 120upx);
	height: 56upx;
}
.search .item button{
	font-size: 26upx;
	line-height: 2.3;
	width: 112upx;
	margin-left: 8upx;
	background-color: #1692DC;
}
</style>
